<!--suppress ALL -->
<template>
    <div style="margin-top: 20px;">
        <template v-for="(menu, idx) in menuList">
            <div class="globalFont" style="margin-top: 10px;">
                <div v-if="menu.children.length > 0" style="color: gray; margin-left: 10px; margin-bottom: 5px;">
                    <span>{{menu.menuName}}</span>
                </div>
                <div v-if="menu.children == 0" style="padding: 8px; width: calc(100% - 16px);" :class="'div_menu_item inline ' + (menu.class != null ? menu.class : '')" @click="clickMenu(menu)">
                    <img v-if="menu.icon != null" :src="'_nuxt/assets/svg/' + menu.icon + '.svg'" class="inline" style="margin-right: 10px; position: absolute; margin-top: -5px;"/>
                    <div class="inline" style="dsposition: absolute; margin-left: 30px;">{{menu.menuName}}</div>
                </div>
                <template v-for="(menuItem, mIdx) in menu.children">
                    <div v-if="menuItem.menuType != '2'" style="padding: 12px; width: calc(100% - 16px);" :class="'div_menu_item inline ' + (menuItem.class != null ? menuItem.class : '')" @click="clickMenu(menuItem)">
                        <img v-if="menuItem.icon != null" :src="'_nuxt/assets/svg/' + menuItem.icon + '.svg'" class="inline" style="margin-right: 10px; position: absolute; margin-top: -3px;"/>
                        <div class="inline" style="dsposition: absolute; margin-left: 30px;">{{menuItem.menuName}}</div>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: "Menu",
        data(){
            return {
                menuList: [],
            }
        },
        mounted() {
            useFetch('/api/menu/list').then(res => {
                console.log(res.data);
                res.data.value.map(i=>{
                    i.class = '';
                    i.children.map(j => {
                       j.class = '';
                    });
                })
                this.menuList = res.data.value;
            });
        },
        methods: {
            clickMenu(menuItem){
                // 移除其它class
                this.menuList.map(i=>{
                    i.class = '';
                    i.children.map(j => {
                        j.class = '';
                    });
                })
                menuItem.class = 'act';
            }
        }
    }
</script>

<style scoped>
    .div_menu_item{
        cursor: pointer;
    }
    .div_menu_item:hover{
        border-left: 3px solid #ffee35;
        background: linear-gradient(to right, rgb(129, 107, 16) 30%, rgb(15, 15, 15));
    }
    .act{
        border-left: 3px solid #ffee35;
        background: linear-gradient(to right, rgb(129, 107, 16) 30%, rgb(15, 15, 15));
    }
</style>
